<template>
  <view class="container">
    <view class="sidebar">
      <view v-for="door in doors" :key="door" class="door-button" :class="{ active: door === selectedDoor }" @click="selectDoor(door)">{{ door }}扇门</view>
    </view>
    <view class="topbar">
      <view v-for="shape in shapes" :key="shape" class="shape-button" :class="{ active: shape === selectedShape }" @click="selectShape(shape)">{{ shape }}</view>
      <view v-for="color in colors" :key="color" class="color-button" :class="{ active: color === selectedColor }" @click="selectColor(color)" :style="{ backgroundColor: color }"></view>
    </view>
    <view class="glass-door" :style="{ border: '1px solid ' + selectedColor, backgroundImage: 'url(' + selectedShape + '.png)' }">
      <view v-for="index in selectedDoor" :key="index" class="door"></view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      doors: [2, 4],
      shapes: ['磨砂', '透明'],
      colors: ['红色', '蓝色'],
      selectedDoor: 2,
      selectedShape: '磨砂',
      selectedColor: '红色',
    };
  },
  methods: {
    selectDoor(door) {
      this.selectedDoor = door;
    },
    selectShape(shape) {
      this.selectedShape = shape;
    },
    selectColor(color) {
      this.selectedColor = color;
    },
  },
};
</script>

<style>

</style>